<template>
  <div>
    <el-form
      :label-position="right"
      label-width="auto"
      :model="formData"
      :size="big"
      :mode="ruleModel"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item prop="username">
        <el-input
          v-model="formData.username"
          :prefix-icon="User"
          :placeholder="typeArr[props.type].username"
          maxlength="20"
          clearable
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formData.password"
          :prefix-icon="Lock"
          type="password"
          clearable
          placeholder="密码"
          maxlength="20"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formData.nickname"
          :prefix-icon="Avatar"
          clearable
          placeholder="昵称"
          maxlength="20"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formData.address"
          :prefix-icon="Location"
          clearable
          placeholder="地址"
          maxlength="20"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="formData.registerType">
          <el-radio value="0">女</el-radio>
          <el-radio value="1">男</el-radio>
          <el-radio value="2">未知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formData.birthday"
          type="date"
          placeholder="生日"
        />
      </el-form-item>

      <el-form-item prop="code">
        <el-row style="width: 100%" :gutter="20" justify="space-between">
          <el-col :span="16">
            <el-input
              v-model="formData.code"
              :prefix-icon="PieChart"
              clearable
              maxlength="4"
              placeholder="验证码"
            />
          </el-col>
          <el-col :span="8">
            <el-image
              :src="props.captcha.img"
              style="width: 100%"
              @click="getCaptcha"
              v-if="props.type === 0"
            />
            <el-button v-else @click="sendEmail">发送验证码</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <span>
          已有账号？
          <el-button type="text" @click="toLogin">去登陆</el-button>
        </span>
        <el-button style="width: 100%" type="primary" @click="onRegister">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import {
  User,
  Lock,
  PieChart,
  Avatar,
  Location,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const emits = defineEmits(["captcha", "register"]);
const props = defineProps({
  captcha: {
    type: Object,
    default: () => {},
  },
  type: {
    type: Number,
    default: 0,
  },
});

const ruleForm = ref();
const rules = ref({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

const router = useRouter();

const ruleModel = ref({
  username: "",
  password: "",
  code: "",
});

const formData = ref({
  username: "",
  password: "",
  nickname: "",
  address: "",
  birthday: "",
  sex: "0",
  phone: "",
  email: "",
  code: "",
  uuid: props.captcha.uuid,
  registerType: props.type,
});

const sendEmail = () => {
  var reg =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (reg.test(formData.value.username)) {
    console.log("正确", reg);
  }
};


const getCaptcha = () => {
  emits("captcha");
};

const toLogin = () => {
  router.push("/login");
};

const onRegister = () => {
  emits("register", formData.value);
};
</script>

<style scoped></style>
